<template>
  <div class="goods">
    <div class="sort-wrapper" ref="sortScroll">
      <ul>
        <li class="sort-item"
          :class="{'nav-active': firstIndex == sortIndex}"
          v-for="(good, firstIndex) of goods"
          :key="firstIndex"
          @click="handleNavIndex(firstIndex)">
          <div class="border-bottom content-box">
            <div class="content">
              <span class="icon" v-if="good.type > 0"
                :class="classMap[good.type]"></span>
              <span class="name">{{good.name}}</span>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="foods-wrapper" ref="foodsScroll">
      <div>
        <div class="foods-wrapper" v-for="(good, firstIndex) of goods" :key="firstIndex" :ref="firstIndex">
          <div class="title">{{good.name}}</div>
          <div class="foods">
            <div class="food-item border-bottom"
              v-for="(food, index) of good.foods" :key="index"
              @click="handleFoodclick(food)"
            >
              <img class="food-img" :src="food.icon">
              <div class="food-info">
                <p class="name">{{food.name}}</p>
                <p class="desc" v-if="food.description">
                  {{food.description}}
                </p>
                <p class="sale-info">
                  <span class="sale-num">月售{{food.sellCount}}份</span>
                  <span>好评率{{food.rating}}%</span>
                </p>
                <div class="price">
                  <span class="new-price">
                    <span style="font-size:.2rem">￥</span>
                    <strong>{{food.price}}</strong>
                  </span>
                  <span class="old-price" v-if="food.oldPrice">
                    <span>￥</span><strong>{{food.oldPrice}}</strong>
                  </span>
                </div>
                <div class="shop-content">
                  <shop-act :food="food"></shop-act>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import ShopAct from '../ShopAct'
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'StoreGoods',
  data () {
    return {
      classMap: ['', 'discount', 'special'],
      heights: [],
      sortIndex: 0
    }
  },
  components: {
    ShopAct
  },
  computed: {
    ...mapState(['goods'])
  },
  mounted () {
    this.$nextTick(() => {
      this.sortScroll = new BScroll(this.$refs.sortScroll, {
        click: true
      })
      this.foodsScroll = new BScroll(this.$refs.foodsScroll, {
        click: true,
        probeType: 3
      })
      setTimeout(() => {
        this.initHeight()
        this.addScroll()
      }, 200)
    })
  },
  methods: {
    initHeight () {
      const heights = [0]
      let foodsWrapper = this.$refs.foodsScroll.getElementsByClassName('foods-wrapper')
      for (let i = 0; i < foodsWrapper.length; i++) {
        heights.push(Math.floor(foodsWrapper[i].offsetHeight) + heights[i])
      }
      this.heights = heights
    },
    addScroll () {
      var lastScrollY = 0
      var scrollY = 0
      this.foodsScroll.on('scroll', pos => {
        scrollY = -pos.y
        if (Math.abs(scrollY - lastScrollY) >= 1) {
          lastScrollY = scrollY
          this.getFoodsIndex(scrollY)
        }
      })
    },
    getFoodsIndex (scrollY) {
      for (let i = 0; i < this.heights.length; i++) {
        if (scrollY >= this.heights[i] && scrollY < this.heights[i + 1]) {
          if (this.sortIndex !== i) {
            this.sortIndex = i
            this.sortScroll.scrollToElement(this.$refs[i][0], 100)
          }
          break
        }
      }
    },
    handleNavIndex (index) {
      this.foodsScroll.scrollToElement(this.$refs[index][0])
      this.sortIndex = index
    },
    // 点击食品，进入商品详情页，并把该食物存到 vuex，供详情页读取响应 food
    handleFoodclick (food) {
      this.getDetailFood(food)
      this.$router.push('/detail')
    },
    ...mapMutations(['getDetailFood'])
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/common.styl'
  .border-bottom::before
    border-color rgba(7, 17, 27, .2)
  .border-bottom:last-child::before
    border none
  .goods
    height 100%
    display flex
    .sort-wrapper
      width 1.55rem
      background-color #f3f5f7
      .sort-item
        padding 0 .12rem
        height 1rem
        &.nav-active
          background-color #ffffff
        .content-box
          height 100%
          $flexCenter()
          .content
            text-align center
            font-size 0
            .icon
              display inline-block
              width .24rem
              height .24rem
              vertical-align top
              background-repeat no-repeat
              background-size .24rem .24rem
              &.special
                background-image url('./special.png')
              &.discount
                background-image url('./discount.png')
              &.decrease
                background-image url('./decrease.png')
              &.invoice
                background-image url('./invoice.png')
            .name
              font-size .24rem
              line-height .28rem
    .foods-wrapper
      flex 1
      .title
        line-height .6rem
        padding-left .2rem
        background-color #f3f5f7
        border-left .08rem solid #d9dde1
      .foods
        padding 0 .36rem
        .food-item
          display flex
          padding .36rem 0
          .food-img
            width 1.2rem
            height 1.2rem
            border-radius .04rem
            margin-right .2rem
          .food-info
            position relative
            flex 1
            color rgb(147, 153, 159)
            .name
              color rgb(7, 17, 27)
            .desc
              font-size .2rem
              line-height .3rem
              margin-top .2rem
              font-weight 200
            .sale-info
              font-weight 200
              font-size .2rem
              margin-top .2rem
            .price
              line-height .6rem
              font-size .2rem
              .new-price
                font-size .28rem
                font-weight 800
                color rgb(240, 20, 20)
              .old-price
                text-decoration line-through
            .shop-content
              position absolute
              bottom -.1rem
              right 0
</style>
